<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>

    .box{
        width: 800px;
        height: 600px;
        background-color: #665e57;
    }
    @media (max-width: 768px){
        body{
            background-color: #bfa;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: #ccc;
        }
    }
</style>
<body>
<!--
响应式布局
    响应式布局的关键是媒体查询
    通过媒体查询可以为不同的设备或设备不同状态来分别设置样式
    媒体查询的语法：
    @media 媒体类型 and (条件){}
        媒体类型：
            all：所有设备
            print：打印设备
            screen：显示设备
            speech：屏幕阅读器
        条件：
            width：视口宽度
            min-width：最小视口宽度
            max-width：最大视口宽度
            height：视口高度
-->
<div class="box"></div>
</body>
</html>
